<template>
  <view class="register-container">
    <form @submit="formSubmit" @reset="formReset">
      <view class="uni-form-item uni-column input-item">
         <input class="uni-input" name="username" placeholder="账号"/>
      </view>
      <view class="uni-form-item uni-column input-item">
        <input class="uni-input" name="password" placeholder="密码"/>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">性别</view>
        <radio-group name="gender" class="gender-column">
          <label>
            <radio value="0" checked/><text>男</text>
          </label>
          <label>
            <radio value="1" /><text>女</text>
          </label>
        </radio-group>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">年龄</view>
        <slider value="20" name="age" show-value></slider>
      </view>
      <view class="uni-btn-v">
        <button type="primary" form-type="submit" size="small">注册</button>
      </view>
    </form>
  </view>
</template>

<script>
var  graceChecker = require("../../../common/graceChecker.js");
export default {
  name: 'register',
  data(){
    return {

    }
  },
  methods: {
    formSubmit: (e)=>{
      //定义表单规则
      var rule = [
          {name:"username", checkType : "string", checkRule:"3,8",  errorMsg:"账号应为3-8个字符"},
          {name:"password", checkType : "string", checkRule:"5,12",  errorMsg:"密码应为5-12个字符"}
      ];
      //进行表单检查
      var formData = e.detail.value;
      var checkRes = graceChecker.check(formData, rule);
      if(checkRes) {
        uni.showToast({title:"注册成功!"});
        setTimeout(()=>{
          uni.navigateTo({
            url: '/pages/tabBar/user/login'
          })
        }, 200)
      }else {
        uni.showToast({ title: graceChecker.error, icon: "none" });
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.gender-column {
  width: 750rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.uni-btn-v {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  button {
    width: 95%;
    
  }
}
</style>